<template>
	<view class="ticket">
		<Navbar></Navbar>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="label" @click="router('/pages/home/my_ticket')">
				<image :src="`${baseImageUrl}/common/label4.png`"></image>
			</view>
			<view class="time">
				<u-count-down :value="value" format="mm:ss" @finish="finish"></u-count-down>
			</view>
			<view class="content">
				<view class="title">
					<view>类型</view>
					<view>涨幅</view>
					<view>操作</view>
				</view>
				<view class="item" v-for="item in list">
					<view>
						<image :src="`${baseImageUrl}/common/gy.png`" v-if="item.field=='silver'"></image>
						<image :src="`${baseImageUrl}/common/hot_cover1.png`" v-else-if="item.field=='foodstuff'">
						</image>
						<image :src="`${baseImageUrl}/common/hot_cover2.png`" v-else-if="item.field=='cloth'"></image>
						<image :src="`${baseImageUrl}/common/hot_cover3.png`" v-else-if="item.field=='titledeed'">
						</image>
						<image :src="`${baseImageUrl}/common/hot_cover4.png`" v-else-if="item.field=='music'"></image>
						<image :src="`${baseImageUrl}/common/hot_cover5.png`" v-else></image>
						<text>{{item.name}}</text>
					</view>
					<!-- <view>￥{{item.price}}</view> -->
					<view>{{item.rise_fall}}%</view>
					<view class="btn" @click="submit(item)">转入</view>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="popup_show" bgColor="transparent" mode="center" @close="close">
			<ChangePopup :total="total" :item="item" @close="close" />
		</u-popup>
	</view>
</template>

<script>
	import {
		ticketIndex
	} from '@/request/api.js';
	import ChangePopup from '@/components/home/ChangePopup.vue';
	export default {
		components: {
			ChangePopup
		},
		data() {
			return {
				temp: {},
				total: 0.00,
				item: {},

				value: 0,

				list: [],
				popup_show: false
			}
		},
		onLoad() {
			this.getList();
		},
		onShow() {
			let date = new Date();
			let m = date.getSeconds();
			let time = m == 0 ? 59 * 1000 : (60 - m) * 1000;
			this.value = time;
		},
		methods: {
			finish() {
				this.value = 60 * 1000;
			},
			async getList() {
				this.temp = await ticketIndex();
				this.list = this.temp.ticket;
			},
			submit(item) {
				this.total = this.temp[item.field];
				this.item = item;
				this.popup_show = true;
			},
			close() {
				this.popup_show = false;
				setTimeout(() => {
					this.getList();
				}, 500);
			}
		}
	}
</script>

<style scoped lang="scss">
	.ticket {
		height: 100vh;
		background: #29170D;
		overflow: hidden;

		.scroll_view {
			height: calc(100vh - #{$navbarHeight});
			position: relative;

			.label {
				width: 136rpx;
				height: 111rpx;
				position: absolute;
				right: 13rpx;
				top: 26rpx;
				z-index: 2;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.time {
				width: 100%;
				height: 100rpx;
				text-align: center;
				position: absolute;
				left: 0;
				top: 200rpx;
				transform: translateY(-50%);
				z-index: 999;

				/deep/ .u-count-down__text {
					color: #fff;
					font-size: 40rpx;
					font-weight: 700;
					font-family: SimSun;
				}
			}

			.content {
				width: 100%;
				height: 1551rpx;
				padding: 420rpx 40rpx 0;
				box-sizing: border-box;
				background: url(#{$baseImageUrl}/bg/bg7.png) no-repeat;
				background-size: 100% 100%;
				position: absolute;
				left: 0;
				top: -50rpx;

				.title {
					padding-bottom: 20rpx;
					display: flex;
					justify-content: space-between;

					view {
						flex: 1;
						text-align: center;
						line-height: 30rpx;
						color: #494338;
						font-size: 30rpx;
						font-weight: 400;
						font-family: SimSun;
					}
				}

				.item {
					width: 100%;
					height: 108rpx;
					margin-top: 10rpx;
					background: url(#{$baseImageUrl}/common/item_668_108.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						flex: 1;
						color: #494338;
						font-size: 26rpx;
						font-weight: 400;
						font-family: SimSun;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 60rpx;
							height: 60rpx;
							margin-right: 15rpx;
						}
					}

					.btn {
						width: 150rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 30rpx;
						font-weight: 400;
						font-family: SimSun;
						background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}
	}
</style>